<template>
	<view>
		<view class="" v-if="JSON.stringify(confirm) !== '{}'"><approverMsg :value="confirm"></approverMsg></view>
		<navigator class="left_box" v-if="paymentList.order_id" :url="'/pages/order/detail/detail?order_id=' + this.paymentList.order_id"><text>查看定单详情</text></navigator>
		<view class="d3">
			<view class="hotelService">
				<!-- <view class="con">
						<text class="txt1">付款编号</text>
						<input type="text" :disabled="isEdit" v-model="paymentList.payment_no" placeholder="请输入" />							
					</view> -->
				<view class="title"><text class="name">添加退款信息</text></view>
				<view class="content">
					<view class="box">
						<view class="">
							<text style="color: red;">*</text>
							<text class="txt1">退款公司</text>
						</view>
						<picker mode="selector" :disabled="isEdit" range-key="title" :range="companyList" @change="payCompanyFn">
							<view class="choose">
								<text :class="paymentList.company_type_text !== '' ? 'active' : ''">
									{{ paymentList.company_type_text === '' ? '请选择' : paymentList.company_type_text }}
								</text>
								<image v-if="paymentList.company_type_text === ''" src="/static/images/right.png" mode=""></image>
							</view>
						</picker>
						<icon class="icon" v-if="paymentList.company_type_text !== ''" type="clear" size="22upx" @click="deleteCompanyType"></icon>
					</view>
					<view class="box">
						<view class="">
							<text style="color: red;">*</text>
							<text class="txt1">款项性质</text>
						</view>
						<input type="text" disabled="" value="退款" placeholder="请选择" />
						<!-- v-model="paymentList.pay_type_text " -->
						<!-- <picker mode="selector" :disabled="isEdit" range-key="title" :range="incomeTypeList" @change="payTypeListFn"  data-type="order">							
						    <view class="choose" >
						    	 <text :class="paymentList.pay_type_text!==''?'active':''">{{paymentList.pay_type_text===''?'请选择':paymentList.pay_type_text}}</text>
						    	 <image v-if="paymentList.pay_type_text===''" src="../../../static/images/right.png" mode=""></image>
						    </view>
						</picker>		
						<icon class="icon" v-if="paymentList.pay_type_text!==''" type="clear" size="22upx"  @click="deleteIcomType"></icon>					 -->
					</view>
					<view class="box">
						<view class="">
							<text style="color: red;">*</text>
							<text class="txt1">退款申请日期</text>
						</view>
						<!-- <timeSelector showType="yearToMinute"  @btnConfirm="apply_pay_dateFn" > -->
						<!-- <input type="text" disabled="" v-model="paymentList.apply_pay_date" placeholder="请选择" /> -->
						<view class="choose" v-if="paymentList.apply_pay_date == ''">
							<text>请选择</text>
							<image src="../../../static/images/right.png" mode=""></image>
						</view>
						<view v-else class="choose" style="margin-right: 50upx;">{{ paymentList.apply_pay_date }}</view>
						<!-- </timeSelector>	 -->
						<!-- <icon class="icon" v-if="paymentList.apply_pay_date!=''" type="clear" size="22upx"  @click="deletegetMoney"></icon>									 -->
					</view>
					<view class="box">
						<view class="">
							<text style="color: red;">*</text>
							<text class="txt1">退款金额</text>
						</view>
						<input type="text" :disabled="isEdit" v-model="paymentList.pay_item_price" placeholder="请输入" />
					</view>
					<view class="box">
						<view class="">
							<text style="color: red;">*</text>
							<text class="txt1">收款人姓名</text>
						</view>
						<input type="text" :disabled="isEdit" v-model="paymentList.pay_to_company" placeholder="请输入" />
					</view>
					<view class="box">
						<view class="">
							<text style="color: red;">*</text>
							<text class="txt1">收款账号</text>
						</view>
						<input type="text" :disabled="isEdit" v-model="paymentList.pay_to_account" placeholder="请输入" />
					</view>
					<view class="box">
						<view class="">
							<text style="color: red;">*</text>
							<text class="txt1">开户行</text>
						</view>
						<input type="text" :disabled="isEdit" v-model="paymentList.pay_to_bank" placeholder="请输入" />
					</view>
					<view class="remark">
						<text class="txt1">备注</text>
						<textarea maxlength="-1" :disabled="isEdit" class="txt2" type="text" v-model="paymentList.payment_remark" placeholder="请输入备注" />
					</view>
				</view>
			</view>
		</view>
		<!-- 付款凭证 -->
		<view class="line"></view>
		<view class="photo">
			<text>退款凭证</text>
			<view class="img_list" style="display: flex;justify-content: left;">
				<view class="addPic" @click="lookImg({ list: paymentList.receipt_img, index: index })" v-for="(item, index) in paymentList.receipt_img" :key="index">
					<image :src="item" mode="widthFix"></image>
					<uni-icons
						v-if="isEdit ? false : true"
						@click="deleteImageArray(index, 'receipt_img')"
						type="minus-filled"
						size="10"
						color="red"
						style="position: absolute;right:-30upx;top: 0;"
					></uni-icons>
				</view>
				<view class="addPic" v-if="isEdit ? false : true" @click="chooseImage('receipt_img')"><image src="../../../static/add.png" mode=""></image></view>
			</view>
		</view>
		<!-- 收据照片结束 -->

		<button type="default" class="order_btn" @click="saveFn()" v-if="options.api">保存</button>
		<!-- 新版审批流程————创建  -->
		<template v-if="sequenceData.length > 0">
			<steps-create :stepList="sequenceData"></steps-create>
		</template>
		<!-- 老版审核流程 -->
		<template v-if="confirmList.length > 0">
			<auditProcess
				:value="confirmList"
				:btnValue="buttons"
				:isShowBtn="options.api ? false : true"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				@resubmit="resubmits"
			></auditProcess>
		</template>
		<!-- 新版审核流程————查看 -->
		<template v-if="confirmSteps.length > 0">
			<steps-look :stepList="confirmSteps"></steps-look>
			<footer-action-btn
				:btnValue="buttons"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				:isShowBtn="options.api ? false : true"
				@resubmit="resubmits"
				@transferSubmit="transferSubmit"
			></footer-action-btn>
		</template>
	</view>
</template>

<script>
import approverMsg from '@/component/approverMsg.vue'; //审核流程
import auditProcess from '@/component/auditProcess.vue'; //审核流程
import selectBox from '@/component/selectBox.vue';
import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
import navigation from '@/component/navigation.vue';

import stepsLook from '@/component/steps-look/steps-look.vue'; // 新版审核流程
import footerActionBtn from '@/component/footer-action-btn/footer-action-btn.vue'; // 底部操作按钮组
import stepsCreate from '@/component/steps-create/steps-create.vue';
import request from '@/utils/request.js';

import sun from '@/utils/sun.js';
export default {
	components: {
		navigation,
		timeSelector,
		selectBox,
		approverMsg,
		auditProcess,
		stepsCreate,
		stepsLook,
		footerActionBtn
	},
	data() {
		return {
			confirm_id: 0,
			order_id: 0,

			isEdit: false, //是否可以编辑
			options: '',
			paymentList: {
				//付款
				pay_category: '',
				pay_type: '6',
				pay_type_text: '退款',
				apply_pay_date: '',
				pay_real_date: '',
				payment_remark: '',
				payment_no: '',
				pay_to_company: '', //收款酒店
				pay_to_account: '', //收款账号
				pay_to_bank: '', //收款银行
				receipt_img: [],
				note_img: [],
				company_type_text: ''
			},
			companyList: [],
			incomePaymentList: [],
			incomeTypeList: [],
			confirmList: [],
			imageArray: [], //合同图片
			receipt_imgArray: [], //收据图片
			note_img_imgArray: [], //小票
			buttons: [],
			confirm: {}, //审批信息

			transferForm: {
				realname: '',
				user_id: ''
			},
			sequenceData: [], // 新版审核
			confirmSteps: [] // 新版审核
		};
	},
	onLoad(options) {
		console.log(options);
		let date = new Date();
		let y = date.getFullYear();
		let m = date.getMonth();
		let d = date.getDate();
		this.paymentList.apply_pay_date = `${y}-${m + 1}-${d}`;
		// 添加 从订单详情页添加子项目 包含order_id
		if (options.params) {
			this.options = JSON.parse(options.params);
			this.order_id = this.options.order_id;
			this.getData(this.options); //获取picker
		}

		// 审核查看 lookApproval是个对象，包含的id是审核的编号，order_id要从审核详情中获取
		if (options.lookApproval) {
			this.options = JSON.parse(options.lookApproval);
			this.isEdit = true;
			//查看信息
			this.getDetail(this.options);
			this.confirm_id = this.options.id;
			// 审核流程--查看
			this.getConfirmList();
		}

		// 查看 从查看订单审核中进入只有id，这个id是审核的编号，order_id要从审核详情中获取
		if (options.id) {
			this.options = options;
			this.isEdit = true;
			//查看信息
			this.getDetail(this.options);
			this.confirm_id = this.options.id;
			// 审核流程--查看
			this.getConfirmList();
		}
		this.changeHeader();
	},
	methods: {
		changeHeader() {
			let title = '';
			if (this.options.complete == 99) {
				title = '意向金退款';
			}
			if (this.options.complete == 98) {
				title = '定金退款';
			}
			if (this.options.complete == 0 || this.options.complete == 100) {
				title = '订单退款';
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
		deleteCompanyType() {
			if (this.isEdit) {
				return;
			}
			this.paymentList.company_id = '';
			this.paymentList.company_type_text = '';
		},
		payCompanyFn(e) {
			let index = e.detail.value;
			this.paymentList.company_type_text = this.companyList[index].title;
			this.paymentList.company_id = this.companyList[index].id;
			this.$forceUpdate();
			this.getConfirmSequence({ id: this.paymentList.company_id });
		},
		//创建订单时的审核流程
		getConfirmSequence(e) {
			let that = this;
			let type = '';
			// 预付款
			if (this.options.complete == 99) {
				type = 'refund_prepay';
			}
			// 定金
			if (this.options.complete == 98) {
				type = 'refund_earnest';
			}
			// 订单
			if (this.options.complete == 0 || this.options.complete == 100) {
				type = 'refund_order';
			}
			
			sun.request({
				url: '/h5/order.confirm/getConfirmSequence',
				showLoading: true,
				token: true,
				data: {
					company_id: e.id,
					type: type
				},
				success(res) {
					that.confirmList = res.data.confirmList;
				}
			});
		},
		//获取查看信息
		getDetail(e) {
			let that = this;

			sun.request({
				url: '/h5/order.confirm/detail',
				showLoading: true,
				token: true,
				data: {
					id: e.id,
					type: e.user ? 'confirm_user' : ''
				},
				success(res) {
					if (res.code == 200) {
						that.paymentList = res.data.detail.payment;
						that.confirmList = res.data.confirmList;
						that.confirm = res.data.confirm; //代表的是当前审核的信息
						that.order_id = that.confirm.order_id;
						that.buttons = res.data.buttons;
						//判断是否可以编辑
						that.buttons.map((item, index) => {
							if (item.id == 'update') {
								that.isEdit = false;
							}
						});
						that.incomeTypeList = res.data.incomeTypeList; //付款性质
						that.incomeTypeList.map((item, index) => {
							if (that.paymentList.pay_type == item.id) {
								that.paymentList.pay_type_text = item.title;
							}
						});
						that.companyList = res.data.companyList;
						that.companyList.map((item, index) => {
							if (that.paymentList.company_id == item.id) {
								that.paymentList.company_type_text = item.title;
							}
						});
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},
		//获取所有的picker
		getAllpicke(e) {
			let that = this;
			sun.request({
				url: e.read,
				showLoading: true,
				token: true,
				data: {
					order_id: e.order_id
				},
				success(res) {
					if (res.code == 200) {
						that.companyList = res.data.companyList ? res.data.companyList : '';
						that.payments = res.data.incomePaymentList ? res.data.incomePaymentList : '';
						that.incomeTypeList = res.data.incomeTypeList ? res.data.incomeTypeList : '';
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},

		// 提交转交
		transferSubmit() {
			let that = this;
			sun.request({
				url: '/api/order.audit/transfer',
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					user_id: that.transferForm.user_id
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						uni.navigateBack({});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 点击取消时清除转交人员信息
		clearTransferForm() {
			this.transferForm = {
				realname: '',
				user_id: ''
			};
		},

		//查看详情审核流程
		getConfirmList() {
			let that = this;
			request.request({
				url: '/api/order.audit/getAuditResult',
				showLoading: true,
				token: true,
				data: { id: that.confirm_id },
				success(res) {
					that.confirmSteps = res.data.process;
				}
			});
		},
		//创建订单时的审核流程
		getConfirmSequence(e) {
			let that = this;
			let type = '';
			// 预付款
			if (this.options.complete == 99) {
				type = 'refund_prepay';
			}
			// 定金
			if (this.options.complete == 98) {
				type = 'refund_earnest';
			}
			// 订单
			if (this.options.complete == 0 || this.options.complete == 100) {
				type = 'refund_order';
			}
			
			request.request({
				url: '/api/order.audit/getAuditProcess',
				showLoading: true,
				token: true,
				data: Object.assign({ order_id: that.order_id }, { audit_type: type }, { company_id: e.id }),
				success(res) {
					if (res.code == 200) {
						that.sequenceData = res.data.process;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},

		getData(e) {
			let that = this;
			sun.request({
				url: e.read,
				showLoading: true,
				token: true,
				data: {
					order_id: e.order_id
				},
				success(res) {
					if (res.code == 200) {
						that.companyList = res.data.companyList ? res.data.companyList : '';
						that.incomePaymentList = res.data.incomePaymentList ? res.data.incomePaymentList : '';
						that.incomeTypeList = res.data.incomeTypeList ? res.data.incomeTypeList : '';
						that.confirmList = res.data.confirmList ? res.data.confirmList : '';
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},
		payTypeListFn(e) {
			let index = e.detail.value;
			this.paymentList.pay_type_text = this.incomeTypeList[index].title;
			this.paymentList.pay_type = this.incomeTypeList[index].id;
			this.$forceUpdate();
		},
		deleteIcomType() {
			if (this.isEdit) {
				return;
			}
			this.paymentList.pay_type = '';
			this.paymentList.pay_type_text = '';
		},
		apply_pay_dateFn(e) {
			if (this.isEdit) {
				return;
			}
			this.paymentList.apply_pay_date = e.ymd;
		},
		//删除付款日期
		deletegetMoney() {
			if (this.isEdit) {
				return;
			}
			this.paymentList.apply_pay_date = '';
		},
		//查看图片
		lookImg(e) {
			let _this = this;
			uni.previewImage({
				current: e.index,
				urls: e.list,
				longPressActions: {
					success: function(data) {},
					fail: function(err) {}
				}
			});
		},
		//选择图片
		chooseImage(e) {
			let _this = this;
			if (this.isEdit) {
				return;
			}
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					// console.log(res)
					_this.upImg(res.tempFiles, e);
					_this.paymentList.note_img = [];
					_this.paymentList.receipt_img = [];
				}
			});
		},
		//上传图片
		upImg(data, e) {
			let _this = this;
			uni.showLoading({title:'上传中',mask:true});
			var i = data.i ? data.i : 0; //当前上传的哪张图片
			var success = data.success ? data.success : 0; //上传成功的个数
			var fail = data.fail ? data.fail : 0; //上传失败的个数
			uni.uploadFile({
				url: sun.http + '/h5/order.upload/doupload',
				filePath: data[i].path,
				header: {},
				name: 'file',
				formData: {
					token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				},
				success: res => {
					if (JSON.parse(res.data).msg == '上传成功') {
						success++; //图片上传成功，图片上传成功的变量+1
						uni.hideLoading();
					}

					if (e == 'receipt_img') {
						_this.paymentList.receipt_img.push(JSON.parse(res.data).data.url);
					}

					if (e == 'note_img') {
						_this.paymentList.note_img.push(JSON.parse(res.data).data.url);
					}
				},
				fail: () => {
					fail++; //图片上传失败，图片上传失败的变量+1
				},
				complete: () => {
					i++; //这个图片执行完上传后，开始上传下一张
					if (i == data.length) {
						//当图片传完时，停止调用
						uni.showToast({
							icon: 'none',
							title: '成功：' + success + ' 失败：' + fail
						});
					} else {
						//若图片还没有传完，则继续调用函数
						data.i = i;
						data.success = success;
						data.fail = fail;
						_this.upImg(data, e);
					}
				}
			});
		},
		//删除图片
		deleteImageArray(index, e) {
			if (e == 'receipt_img') {
				this.paymentList.receipt_img.splice(index, 1);
			}

			if (e == 'note_img') {
				this.paymentList.note_img.splice(index, 1);
			}
		},
		//提交审核
		saveFn() {
			let that = this;
			let url = "/h5/order.refund/doCreate";
			request.request({
				url: url,
				showLoading: true,
				token: true,
				data: {
					is_new: 1,
					order_id: that.options.order_id,
					payment: that.paymentList
				},
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 编辑提交
		editFn(api, id) {
			let that = this;
			request.request({
				url: api,
				showLoading: true,
				token: true,
				data: {
					is_new: 1,
					order_confirm_id: that.options.id,
					id: id ? id : '',
					payment: that.paymentList
				},
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		//底部评论按钮
		resubmits(item) {
			if (item.label == '同意' || item.label == '拒绝' || item.label == '评论') {
				this.commentFn(item);
			} else if (item.label == '转交') {
				uni.navigateTo({
					url: '../../../component/search/search?type=' + 'changeUser'
				});
			} else {
				this.editFn(item.api, item.id);
			}
		},
		// 编辑提交
		commentFn(e) {
			let that = this;
			let url = '';
			if (e.label == '拒绝' && that.confirmList.length == 0) {
				url = '/api/order.audit/reject';
			} else if (e.label == '同意' && that.confirmList.length == 0) {
				url = '/api/order.audit/accept';
			} else {
				url = e.api;
			}
			sun.request({
				url: url,
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					content: e.content ? e.content : '',
					image: e.image ? e.image : ''
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						that.getDetail(that.options);
						that.getConfirmList();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
@import '../common.less';
</style>
